<script setup lang='ts'>
import miniPlayer from '@/pages/components/miniPlayer.vue'
import {  ref } from 'vue'
import { playlistApi, commentApi } from '@/services'
import type { PlaylistResponse, CommentResponse, TrackItem ,CommentItem } from '@/services/type'
import { onLoad } from '@dcloudio/uni-app'
import { useMusicStore } from '@/store/listMusic'
import commentSection from '../components/commentSection.vue'


const commentBtn = ref()
const musicState = useMusicStore()
// 歌单
const playList = ref<PlaylistResponse>()
const playListRes = async (id: number) => {
  try {
    const res = await playlistApi(id)
    console.log(res.playlist)
    playList.value = res.playlist
  } catch(e) {
    console.log(e)
  }
}
const id = ref('')
const curI = ref(-1)
onLoad((option) => {
  id.value = option?.id
  // console.log(option)
  playListRes(Number(id.value))
})
// 跳转播放
const onPlayer = (item: TrackItem) => {
  uni.navigateTo({
	url: '/pages/player/player'
})
musicState.song = item
curI.value = playList.value?.tracks?.findIndex(v => v.id === item.id) as number
musicState.songs = playList.value?.tracks as TrackItem[] 
// console.log(musicState.songs, musicState.song)
}
// 跳转全部播放
const onPlayerAll = (tracks: TrackItem[]) => {
  uni.navigateTo({
    url: '/pages/player/player'
  })
  musicState.songs = tracks
  musicState.song = tracks[0]
  console.log(tracks)
}

// 评论
const comments = ref<CommentResponse>()
const commentRes = async (id: number) => {
  try {
    const res = await commentApi(id)
    // console.log(res)
    comments.value = res
  } catch(e) {
    console.log(e)
  }
}
// 点击评论
const onComment = () => {
  commentRes(Number(id.value))
  if(commentBtn.value){
    commentBtn.value.open()
  }
}
</script>

<template>
  <view class="songlist-box">
    <view class="songlist-wrap">
      <view class="header">
        <view class="head-bg" :style="{backgroundImage: `url(${playList?.coverImgUrl})`}"></view>
        <view class="head-mask"></view>
        <view class="head-con">
          <view class="con-info">
            <image :src="playList?.coverImgUrl" ></image>
            <view class="info-right">
              <view class="info-title">{{ playList?.name }}</view>
              <view class="info-singer">
                <image :src="playList?.creator?.avatarUrl" alt=""></image>
                <view>{{ playList?.creator?.nickname }}</view>
              </view>
            </view>
          </view>
          <view class="con-desc">{{ playList?.description}}</view>
          <view class="con-btns">
            <button class="btn">
              <uni-icons type="redo-filled" size="25" color="#fff"></uni-icons>
              <text>{{ playList?.shareCount }}</text>
            </button>
            <button class="btn" @click="onComment">
              <uni-icons type="chat" size="25" color="#fff"></uni-icons>
              <text>{{ playList?.commentCount }}</text>
            </button>
            <button class="btn">
              <uni-icons type="folder-add-filled" size="25" color="#fff"></uni-icons>
              <text>{{ playList?.subscribedCount }}</text>
            </button>
          </view>
        </view>
      </view>
      <view class="songlist">
        <view class="list-top" @click="onPlayerAll(playList?.tracks as TrackItem[])">
          <svg t="1742288754518"viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2650" width="26" height="26"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z" fill="#c84341" p-id="2651"></path><path d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z" fill="#c84341" p-id="2652"></path></svg>
          <view>播放全部({{ playList?.tracks?.length }})</view>
        </view>
        <view class="list">
          <view class="list-item" v-for="(item, index) in playList?.tracks" :key="item.id" @click="onPlayer(item)">
            <text class="text">{{ index + 1 }}</text>
            <view class="item">
              <view class="item-song">{{ item.name}}</view>
              <view class="item-singer"><text v-for="ar in item.ar" :key="ar.id">{{ ar.name }}</text></view>
            </view>
            <view class="actI">{{ curI === index ? "正在播放" : '' }}</view>
            <view><uni-icons class="item-right" type="right" size="20" color="#bbb"></uni-icons></view>
          </view>
        </view>
      </view>
      <view class="com">
        <commentSection :hot-list="comments?.hotComments as CommentItem[]" :new-list="comments?.comments as CommentItem[]" ref="commentBtn"/>
      </view>
    </view>
    <view class="footer">
      <miniPlayer  v-if="musicState.song"/>
    </view>
  </view>
</template>

<style lang='scss' scoped>
.songlist-box{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.songlist-wrap{
  width: 100vw;
  flex: 1;
  overflow: scroll;
}
.header{
  width: 100vw;
  height: 480rpx;
  position: relative;
  color: #fff;
  .head-bg{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(40rpx);
    transform: scale(1.2);
    transform: translate(-50%, -50%);
  }
  .head-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: .4);
  }
  .head-con{
    padding: 30rpx;
    position: relative;
  }
}
.con-info{
  display: flex;
  image{
    width: 240rpx;
    height: 260rpx;
    z-index: 10;
    border-radius: 20rpx;
  }
  .info-right{
    flex: 1;
    z-index: 10;
    margin-left: 40rpx;
    .info-title{
      font-size: 18px;
      font-weight: 700;
    }
    .info-singer{
      line-height: 80rpx;
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      image{
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }
    }
  }
}
.con-desc{
  line-height: 70rpx;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.con-btns{
  display: flex;
  align-items: center;
  .btn{
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    margin-right: 30rpx;
    border-radius: 40rpx;
    color: #fff;
    background: rgba($color: #79716f, $alpha: .4);
  }
}
.songlist{
  background: #fff;
  .list-top, .list-item{
    border-bottom: 2rpx solid #eee;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
  }
  .list-top{
    height: 80rpx;
  }
  svg{
    margin-right: 30rpx;
  }
}
.list-item{
  .text{
    width: 60rpx;
    padding-left: 20rpx;
  }
  .item{
    flex: 1;
    overflow: hidden;
    margin-left: 25rpx;
    .item-song{
      color: #333;
      font-size: 16px;
      height: 70rpx;
      line-height: 70rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .item-singer{
      color: #8a8a8a;
      font-size: 14px;
      height: 60rpx;
      line-height: 60rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      text{
        margin-right: 20rpx;
      }
    }
    .item-right{
      width: 50rpx;
    }
  }
}
.actI{
  color: red;
  font-size: 12px;
}
.footer{
  height: 100rpx;
  flex-shrink: 0;
  padding-bottom: 100rpx;
}
.com{
  height: 500px;
  overflow-y: scroll;
  overflow: hidden;
}
</style>